<%--
  Created by IntelliJ IDEA.
  User: LiuXiaoChuan
  Date: 2022/5/26
  Time: 9:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>招生列表</title>
    <%--    css   js--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>

    <script>
        layui.use(['table', 'util', 'jquery', 'layer', 'form'], function () {
            var table = layui.table, util = layui.util, $ = layui.jquery, layer = layui.layer, form = layui.form;

            //监听表单模糊查询
            form.on('submit(search-btn)', function (d) {
                var negativeName = $("#negativeName").val();
                var majorId = $("#majorId").val();
                // var studType = $("#studType").val();
                // var classTypeName = $("#classTypeName").val();
                table.reload('titleEt', {//指定条件重载table
                    page: {page: 1},
                    where: {     //条件
                        negativeName: negativeName,
                        majorId: majorId,
                        // studType: studType,
                        // classTypeName: classTypeName,
                    },
                });
            });


            //监听form表单提交  模糊查询  查看全部按钮
            form.on('submit(shuax-btn)', function (d) {
                location.reload("titleEt");//重新加载父页面表格
            });


            //监听工具栏按钮
            table.on('tool(demo)', function (res) {
                var row = res.data; //获取当前行的数据（点哪一行就是哪一行）
                var event = res.event;//获取点的是哪个按钮
                var enrollmentId = row.enrollmentId;//获取行中的ID列（工具栏 按钮上指定的 lay-event）
                if (event == 'edit') {
                    layer.open({
                        type: 2,//设置为iframe
                        fix: false,//不固定
                        maxmin: true,//出现最大化最小化按钮
                        offset: '10px',//垂直水平位置
                        shadeClose: true,
                        shade: 0.4,//遮罩层透明度
                        area: ['500px', '600px'],//弹出层宽高
                        title: "招生信息",//弹出层标题
                        content: '${pageContext.request.contextPath}/et/bblist/' + enrollmentId//弹出层内网页
                    });
                };
            });

        });
    </script>
</head>
<body>
<%--<div>--%>
<%--&lt;%&ndash;    <form class="layui-form" action="${pageContext.request.contextPath}">&ndash;%&gt;--%>

<%--&lt;%&ndash;        <div class="layui-inline">招生老师:</div>&ndash;%&gt;--%>
<%--&lt;%&ndash;        <div class="layui-inline">&ndash;%&gt;--%>
<%--&lt;%&ndash;            <input type="text" name="negativeName" id="negativeName" class="layui-input"/>&ndash;%&gt;--%>
<%--&lt;%&ndash;        </div>&ndash;%&gt;--%>


<%--&lt;%&ndash;        <div class="layui-inline">专业：</div>&ndash;%&gt;--%>
<%--&lt;%&ndash;        <div class="layui-inline">&ndash;%&gt;--%>
<%--&lt;%&ndash;            <div class="layui-input-inline">&ndash;%&gt;--%>
<%--&lt;%&ndash;                <select name="majorId" id="majorId">&ndash;%&gt;--%>
<%--&lt;%&ndash;                    <option value="">- 请 - 选 - 择 -</option>&ndash;%&gt;--%>
<%--&lt;%&ndash;                    <c:forEach items="${majorList}" var="s">&ndash;%&gt;--%>
<%--&lt;%&ndash;                        <option value="${s.majorId}">${s.majorName}</option>&ndash;%&gt;--%>
<%--&lt;%&ndash;                    </c:forEach>&ndash;%&gt;--%>
<%--&lt;%&ndash;                </select>&ndash;%&gt;--%>
<%--&lt;%&ndash;            </div>&ndash;%&gt;--%>
<%--&lt;%&ndash;        </div>&ndash;%&gt;--%>

<%--&lt;%&ndash;        &lt;%&ndash;        <div class="layui-inline">班级类别：</div>&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;        <div class="layui-inline">&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;            <div class="layui-input-inline">&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;                <select name="studType" id="studType">&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;                    <option value="">- 请 - 选 - 择 -</option>&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;                    <c:forEach items="${classtypelist}" var="s">&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;                        <option value="${s.calssTypeId}">${s.classTypeName}</option>&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;                    </c:forEach>&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;                </select>&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;            </div>&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;        </div>&ndash;%&gt;&ndash;%&gt;--%>

<%--&lt;%&ndash;        <a class="layui-btn" lay-filter="search-btn" lay-submit="" lay-size="sm">搜索</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;        <a class="layui-btn" lay-filter="shuax-btn" lay-submit="" lay-size="sm">刷新</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;    </form>&ndash;%&gt;--%>
<%--</div>--%>
<div class="layui-tab layui-tab-card" >
    <ul class="layui-tab-title">
        <li class="layui-this">招生统计表</li>
        <li>招生老师统计图</li>
    </ul>
    <div class="layui-tab-content" style="height: 150px;">
        <div class="layui-tab-item layui-show">
                <table class="layui-table" id="titleEt" lay-filter="demo" lay-size="sm"
                       lay-data="{url:'${pageContext.request.contextPath}/et/bblist',toolbar: '#toolbarDemo',page:true,id:'titleEt'}">
                    <thead>
                    <tr>

                        <th lay-data="{field:'enrollmentId',sort:true,width:80, sort: true, fixed: 'left', totalRowText: '合计：'}">编号</th>
                        <th lay-data="{field:'negativeName',sort:true}">招生老师</th>
                        <th lay-data="{field:'majorName',sort:true}">专业</th>
                        <th lay-data="{field:'ren',sort:true}">人数</th>
                        <th lay-data="{field:'enrollMoney',sort:true}">宣传费</th>

                        <%--        <th lay-data="{toolbar:'#tools',width:150,align:'center',fixed:'right'}">操作</th>--%>
                    </tr>
                    </thead>
                </table>
                <script type="text/html" id="tools">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
                </script>
            </div>
        <div class="layui-tab-item">
            <div id="main" style="width: 1000px;height:600px;"></div>
        </div>
    </div>
</div>



<script>

    $(document).ready(function(){
        //echarts进行初始化
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption({
            //图标题
            title:{text: '招生统计图'},
            //图提示框
            tootip:{
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    data: []
                }]
        });
        //使用jQuery中的$.get()获取data.json文件，使用done函数;
        //done(function(data))中data表示调用的函数返回的数据
        $.get('${pageContext.request.contextPath}/et/qzstx').done(function(data){
            myChart.setOption({
                yAxis:{
                    name:'招生老师',
                    data:data.month

                },
                series:[{
                    data:data.amount1
                }]
            });
        });
    });
</script>

</body>
</html>